<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
    <div class="head">
        <div class="detail">
            <div class="minilogo"> <img src="images/mi-logo.png" alt="logo"> </div>
            <div class="words">
                <strong><p>小米商城</p></strong>
                <span>让每个人都能享受科技的乐趣</span>
            </div>
        </div>
    </div>

    <div class="body">
     <div class="form">
        <!-- <form > -->
            <div class="choice-box">
            <p class="login">
                <span class="infomation  dl">账号登录</span>
                <span style="color: #e0e0e0;">|</span>
                <span class="scan  dl">扫码登录</span>
            </p>
            </div>

            <div class="js-change">
            <div class="login-content">
            <div class="num-login">
            <p class="phone"><input type="text" placeholder="邮箱/手机号/小米账号"></p>
            <p class="password"><input type="password" placeholder="密码"></p>
            <p class="submit"><input type="submit" value="登录"></p>
        <!-- </form> -->
        <p class="register">
            <span>注册小米账号</span>
            <span>|</span>
            <span>忘记密码?</span>
        </p>
            
            
          
            
        <div class="footer">
            <p class="other">
                <span class="left"></span>
                其他登录方式
                <span class="right"></span>
            </p>
            <div class="all-icon">
                <a href="#"><span class="QQ"></span></a>
                <a href="#"><span class="weibo"></span></a>
                <a href="#"><span class="pay"></span></a>
                <a href="#"><span class="wechat"></span></a>
            </div>
        </div>
    </div>   
    </div>
    <div class="scan-login">
        <img src="images/QRcode.png" alt="二维码">
        <div class="appendix">
            <p>使用
            <span><a href="#">小米商城APP</a></span> 
            扫一扫</p>
            <p>小米手机可打开「设置」>「小米帐号」扫码登录</p>
        </div>
     </div>
    </div>
    </div>
    </div>

    <div class="foot">
        <div class="language">
            <a href="#"><span>简体</span></a>
            <span>|</span>
            <a href="#"><span>繁体</span></a>
            <span>|</span>
            <a href="#"><span>English</span></a>
            <span>|</span>
            <a href="#"><span>常见问题</span></a>
        </div>
        <div class="copyright">
            <span>小米公司版权所有京ICP备10046444-</span>
            <img src="images/police.png" alt="policeLogo">
            <span>-京公网安备11010802020134号 京ICP证110507号</span> 
        </div>
    </div>

    <script>
        var $s=$(".login>.dl");
        for(var i=0;i<$s.length;i++){
            $s[i].index=i;
        }
        $s.click(function(){
            $(this).addClass("infomation").siblings().removeClass("infomation");
            $(".js-change").children().hide().eq(this.index).show();
        });

        $(".choice-box").click(function () {
            /* 1.点击当前元素添加class,给兄弟元素移除class */
            $(this).addClass("infomation").siblings().removeClass("infomation");
            // var index = $(this).index();
            // console.log(index);
            // /* 2.点击对应按钮,对应图片显示 */
            // $("img").eq(index).fadeIn(1000).siblings().fadeOut(1000);
        })
    </script>
</body>
</html>